import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, LOCALE_ID } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

import { OverlayModule } from '@angular/cdk/overlay';
import { MatDialogModule, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
import { DragDropModule } from '@angular/cdk/drag-drop';

import { AppRoutingModule } from './app-routing.module';

import { NgResizableModule } from 'ngresizable';
import { AppComponent } from './app.component';
import { WorkbenchComponent } from './workbench/workbench.component';
import { BannerComponent } from './banner/banner.component';
import { MainComponent } from './main/main.component';
import { NavigaterComponent } from './navigater/navigater.component';
import { ChatComponent } from './chat/chat.component';
import { VideozoneComponent } from './videozone/videozone.component';
import { WhiteboardComponent } from './whiteboard/whiteboard.component';
import { ToolboxComponent } from './whiteboard/toolbox/toolbox.component';
import { ControllerComponent } from './whiteboard/controller/controller.component';
import { PaletteComponent } from './whiteboard/palette/palette.component';
import { MessageComponent } from './chat/message/message.component';
import { AvatarComponent } from './common/avatar/avatar.component';
import { SendboxComponent } from './chat/sendbox/sendbox.component';
import { VideoComponent } from './videozone/video/video.component';
import { RecordComponent } from './record/record.component';
import { MessageboxComponent } from './chat/messagebox/messagebox.component';
import { CalendarComponent } from './calendar/calendar.component';
import { ScheduleComponent } from './schedule/schedule.component';
import { BookedComponent } from './booked/booked.component';
import { PainterComponent } from './whiteboard/painter/painter.component';
import { MessageDialogComponent } from './dialog/message-dialog/message-dialog.component';

import localeZhHans from '@angular/common/locales/zh-Hans';
import { registerLocaleData } from '@angular/common';
import { LoginComponent } from './UI/login/login.component';
registerLocaleData(localeZhHans);

import { NgScrollbarModule } from 'ngx-scrollbar';

@NgModule({
  declarations: [
    AppComponent,
    BannerComponent,
    MainComponent,
    NavigaterComponent,
    WorkbenchComponent,
    ChatComponent,
    VideozoneComponent,
    WhiteboardComponent,
    ToolboxComponent,
    ControllerComponent,
    PaletteComponent,
    MessageComponent,
    AvatarComponent,
    SendboxComponent,
    VideoComponent,
    RecordComponent,
    MessageboxComponent,
    CalendarComponent,
    ScheduleComponent,
    BookedComponent,
    PainterComponent,
    MessageDialogComponent,
    LoginComponent,
    // SettingsComponent,
    // ThemeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MatDialogModule,
    DragDropModule,
    NgResizableModule,
    NgScrollbarModule,
    OverlayModule,
  ],
  entryComponents: [
    MessageDialogComponent
  ],
  providers: [
    { provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}},
    { provide: LOCALE_ID, useValue: 'zh-Hans' }
  ],
  bootstrap: [AppComponent]
})

export class AppModule {
   // Diagnostic only: inspect router configuration
   constructor(router: Router) {
    // Use a custom replacer to display function names in the route configs
    // const replacer = (key, value) => (typeof value === 'function') ? value.name : value;

    // console.log('Routes: ', JSON.stringify(router.config, replacer, 2));
  }
}
